Jassif Team Institution

The <div> Element

<div> உறுப்பு இயல்பாக ஒரு தொகுதி உறுப்பாகும், அதாவது அது கிடைக்கும் அனைத்து அகலத்தையும் எடுத்துக்கொள்கிறது, மேலும் முன்னும் பின்னும் வரி இடைவெளிகளுடன் வருகிறது.

Example

ஒரு <div> உறுப்பு கிடைக்கும் அனைத்து அகலத்தையும் எடுத்துக்கொள்கிறது:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

<div> உறுப்புக்கு தேவையான பண்புக்கூறுகள் எதுவும் இல்லை, ஆனால் style, class மற்றும் id ஆகியவை பொதுவானவை.

<div> as a container

<div> உறுப்பு பெரும்பாலும் வலைப்பக்கத்தின் பகுதிகளை ஒன்றாகக் குழுப்படுத்தப் பயன்படுத்தப்படுகிறது.

Example

HTML உறுப்புகளுடன் ஒரு <div> உறுப்பு:

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

Center align a <div> element

100% அகலமாக இல்லாத ஒரு <div> உறுப்பு உங்களிடம் இருந்தால், அதை மைய சீரமைக்க விரும்பினால், CSS margin பண்புக்கூறை auto ஆக அமைக்கவும்.

Example

<style>
div {
  width:300px;
  margin:auto;
}
</style>

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

Multiple <div> elements

ஒரே பக்கத்தில் பல <div> கொள்கலன்களைக் கொண்டிருக்கலாம்.

Example

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

<div>
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has over 4 million inhabitants.</p>
</div>

Aligning <div> elements side by side

வலைப்பக்கங்களை உருவாக்கும்போது, பெரும்பாலும் இரண்டு அல்லது அதற்கு மேற்பட்ட <div> உறுப்புகளை இப்படி பக்கவாட்டில் வைக்க விரும்புவீர்கள்:

உறுப்புகளை பக்கவாட்டில் சீரமைப்பதற்கு வெவ்வேறு முறைகள் உள்ளன, அனைத்தும் சில CSS ஸ்டைலிங்கை உள்ளடக்கியது. நாங்கள் மிகவும் பொதுவான முறைகளைப் பார்ப்போம்:

.mycontainer div {
  width:33%;
  float:left;
}

div {
  width: 30%;
  display: inline-block;
}

.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}

.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

Exercise

பின்வரும் குறியீட்டைக் கவனியுங்கள்:

<div style='width:200px;margin:auto'>
  <h2>London</h2>
</div>

HTML Tags